<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/app.css" />
		<link rel="stylesheet" type="text/css" href="../../css/appOther.css" />
		<style type="text/css">
			.unread{
				color: #0072DC;
				font-weight: bold;
			}
			.mui-badge{
			    width: 14px;
			    height: 14px;
			    margin-left: 3px !important;
			    padding-top: 1px !important;
			}
		</style>
	</head>

	<body id='app'>
		<div class="mui-content">
			<div id="slider" class="mui-slider mui-fullscreen">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#notify">
						通知
						<span id="notifyCount" class="mui-badge mui-badge-danger" :style='unReadCount.inform>0?"":"display: none;"'>{{unReadCount.inform}}</span>
					</a>
					<!--<a class="mui-control-item" href="#atMe">
						@我
					</a>-->
					<a class="mui-control-item" href="#msg">
						私信
						<span id="privateCount" class="mui-badge mui-badge-danger" :style='unReadCount.privateMsg>0?"":"display: none;"'>{{unReadCount.privateMsg}}</span>
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="notify" class="mui-slider-item mui-control-content mui-active">
						<div id='wrapperNotify' class="mui-scroll-wrapper">
							<div id='scrollNotify' class="mui-scroll" data-type='notify'>
								<ul class="mui-table-view app-hide">
									<li @tap='goNotify(notify.Target, notify.TargetID)' v-for="notify in notifyList" class="mui-table-view-cell">
										<i class="mui-pull-right mui-icon iconfont i_label_little" style="color: #666666;">
											<img :src="notify.Avatar" alt="" style="border-radius: 50%;width: 20px;height: auto;"/>
										</i>
										<p><span class="text_main card_username">{{notify.Name}}</span>
											<span class="text_main">{{notify.Hint}}</span>
											<span :class="notify.Status==1?'text_main unread':'text_main'">{{notify.Status==1?'(未读)':'(已读)'}}</span>
										</p>
										<p class="card_title text_main">{{{notify.Title}}}</p>
										<div>
											<p v-if="notify.ObjType==='topic'" class="card_content_attr text_submain">
												<span class="mui-badge-number">{{notify.CommentsNumber}}</span>
												<span>{{{notify.Content}}}</span>
											</p>
											<p class="text_note">
												<span class="card_note-fl ">来自：{{notify.CircleName}}</span>
												<span class="card_note-fr">{{notify.Datetime}}</span>
											</p>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<!--<div id="atMe" class="mui-slider-item mui-control-content">
						<div id='wrapperAtMe' class="mui-scroll-wrapper">
							<div id='scrollAtMe' class="mui-scroll" data-type='atMe'>
								<ul class="mui-table-view">
									<li @tap='goAnswer(item.AnswerID)' v-for="item in atMeList" class="mui-table-view-cell">
										<i class="mui-pull-left mui-icon iconfont i_label" style="color: #666666;"><img :src="item.Avatar" alt="" style="border-radius: 50%;width: 20px;height: auto;"></i>
										<p>
											<span class="text_subtitle label-title">{{item.Name}}</span>
											<span class="text_subnote label-time">{{item.Time}}</span>
										</p>
									</li>
								</ul>
							</div>
						</div>
					</div>-->
					<div id="msg" class="mui-slider-item mui-control-content">
						<div id='wrapperMsg' class="mui-scroll-wrapper">
							<div id='scrollMsg' class="mui-scroll" data-type='msg'>
								<ul class="mui-table-view">
									<li @tap='goMsg(item)' v-for="item in msgList" class="mui-table-view-cell">
										<i class="mui-pull-left mui-icon iconfont i_label" style="color: #666666;"><img :src="item.Avatar" alt=""  style="border-radius: 50%;width: 20px;height: auto;"></i>
										<p class="text_note label-title" style="display: block;">{{item.Name}}
											<span :class="item.Status==1?'text_main unread':'text_main'">{{item.Status==1?'(未读)':'(已读)'}}</span>
										</p>
										<p class="text_subnote text_hid">{{{item.Content}}}</p>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="../../js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui-extend.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.pullToRefresh.material.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					notifyList: [],
					atMeList: [],
					msgList: [],
					scrollNotify: {},
					scrollAtMe: {},
					scrollMsg: {},
					paramObj: {
						PageSize: 6,
						CurPageNotify: 1,
						CurPageAtMe: 1,
						CurPageMsg: 1,
					},
					unReadCount:{
						inform:0,
						privateMsg:0,
					},
					webviewIndex:{},
				},
				ready: function() {
					var me = this;
					$('#app .app-hide').show();
					mui.init();
					ui.fixScroll(0);
					this.scrollNotify = ui.setPullToRefresh('#wrapperNotify', '#scrollNotify', this.getNotify);
//					this.scrollAtMe = ui.setPullToRefresh('#wrapperAtMe', '#scrollAtMe', this.getAtMe);
					this.scrollMsg = ui.setPullToRefresh('#wrapperMsg', '#scrollMsg', this.getMsg);
					document.addEventListener('show', function() {
//						console.log("come in inform show");
						mui.plusReady(function () {
							me.webviewIndex = plus.webview.getWebviewById('index');
							me.getNotify(true, true);
//							me.getAtMe(true);
							me.getMsg(true);
						})
					});
				},
				methods: {
					goMsg: function(item){
						openPage('../mycenter/chat.html','chat',{uid:item.UserID, uname:item.Name, uimg: item.Avatar});
					},
					goNotify:function(target,targetID){
						console.log("go notify "+target+' '+targetID);
						var targetInt = parseInt(target);
						switch (targetInt){
							// 圈子详情
							case 12:
							case 13:
								openPage('../circle/circle.html','circle',{cid:targetID});
								break;
							// 话题详情
							case 1:
							case 6:
							case 8:
							case 14:
								openPage('../circle/question.html','question',{qid:targetID});
								break;
							// 评论详情
							case 2:
							case 3:
							case 4:
							case 7:
							case 9:
							case 10:
							case 15:
								openPage('../circle/answer.html','answer',{aid:targetID});
								break;
							// 他人用户主页
							case 5:
								console.log("尚未完成");
								break;
							case 11:
								mui.alert('APP暂不支持管理员操作，请到PC端操作')
								break;
							default:
								break;
						}
					},
					goAnswer:function(aid){
						openPage('../circle/answer.html','answer',{aid:aid});
					},
					getNotify:function(isRefresh, closeWait){	
						var self = this;
						var nomore = false;
						self.paramObj.CurPageNotify = isRefresh?1:self.paramObj.CurPageNotify+1;	// 当前页码
						
						message.getInformList({														// 请求数据
							PageSize: self.paramObj.PageSize,
							CurPage: self.paramObj.CurPageNotify									
						}, function(data) {
							self.unReadCount.inform = data.UnreadCount;
							data=data.Data || [];
							self.notifyList = isRefresh ? data:self.notifyList.concat(data); 		// 拿到数据
							nomore = data.length < self.paramObj.PageSize;
						}, function() {
							ui.clearScrollAnimal(self.scrollNotify.puller,isRefresh, nomore);
							if(closeWait){
								plus.nativeUI.closeWaiting();
							}
							self.updateIndexBadge();
						});
					},
//					getAtMe:function(isRefresh){
//						var self = this;
//						var nomore = false;
//						self.paramObj.CurPageAtMe = isRefresh?1:self.paramObj.CurPageAtMe+1;	// 当前页码
//						
//						message.getAtList({														// 请求数据
//							PageSize: self.paramObj.PageSize,
//							CurPage: self.paramObj.CurPageAtMe									// 当前页码
//						}, function(data) {
//							self.atMeList = isRefresh ? data:self.atMeList.concat(data); 		// 拿到数据
//							nomore = data.length < self.paramObj.PageSize;
//						}, function() {
//							ui.clearScrollAnimal(self.scrollAtMe.puller,isRefresh, nomore);
//						});
//					},
					getMsg:function(isRefresh){
						var self = this;
						var nomore = false;
						self.paramObj.CurPageMsg = isRefresh?1:self.paramObj.CurPageMsg+1;		// 当前页码
						
						message.getPrivateList({														// 请求数据
							PageSize: self.paramObj.PageSize,
							CurPage: self.paramObj.CurPageMsg									// 当前页码
						}, function(data, unreadCount) {
							self.unReadCount.privateMsg = data.UnreadCount;
							data=data.Data;
							self.msgList = isRefresh ? data:self.msgList.concat(data); 			// 拿到数据
							nomore = data.length < self.paramObj.PageSize;
						}, function() {
							ui.clearScrollAnimal(self.scrollMsg.puller,isRefresh, nomore);
							self.updateIndexBadge();
						});
					},
					updateIndexBadge:function () {
						var self = this;
						var index= plus.webview.getWebviewById('index');
						mui.fire(index,'updateBadge',{msgBadge:self.unReadCount.inform+self.unReadCount.privateMsg});
					}
				}
			});
		</script>
	</body>

</html>